<template>
  <div class="container">
      <div class="date-box">
        <el-date-picker
          v-model="dates"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button  class="check" type="success" @click="confirm">确定</el-button>       
      </div>
      <div class="chart-row">
        <div  id="dailyTime" :style="{width: '600px', height: '400px'}"></div>
        <div  id="sportDuration" :style="{width: '600px', height: '400px'}"></div>
      </div>
      <div class="chart-row">
        <div  id="comfortLevel" :style="{width: '600px', height: '400px'}"></div>
        <div  id="weather" :style="{width: '600px', height: '400px'}"></div>
      </div>
      <div class="chart-row">
        <div  id="sportType" :style="{width: '600px', height: '400px'}"></div>
        <div  id="location" :style="{width: '100%'}">
          <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-efddddc1-8b03-43af-bdb6-3444fd8e83c7/5880b0af-f2ce-44de-8b83-7f68e4feadbf.png" alt="">
        </div>
      </div>
  </div>
</template>

<script>
import GlobalPersona from '../../classes/GlobalPersona.js'
let global_persona=new GlobalPersona()
export default {
  data () {
    return {
      start_date:"",
      end_date:"",
      dates:{}
    }
  },
  async mounted(){

    this.drawLine();
    this.drawLine2()
  },
  methods: {
    drawLine2(){
        // 基于准备好的dom，初始化echarts实例
        let daily_time_chart = this.$echarts.init(document.getElementById('dailyTime'))
        // 绘制图表
        daily_time_chart.setOption(global_persona.getDailyTimeDistributionData());
    },
    confirm(){
      let start_date=this.dates[0]
      let start_date_t = new Date(start_date);
      this.start_date=start_date_t.getTime()
      let end_date=this.dates[1]
      let end_date_t = new Date(end_date);
      this.end_date=end_date_t.getTime()
      this.showGlobalPersona()
    },
    async showGlobalPersona(){
      await global_persona.getSportRecordsByDate(this.start_date,this.end_date)
    },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let sport_duration = this.$echarts.init(document.getElementById('sportDuration'))
        // 绘制图表
        sport_duration.setOption(global_persona.getSportDurationDistributionData());

        let daily_time_chart = this.$echarts.init(document.getElementById('dailyTime'))
        daily_time_chart.setOption(global_persona.getDailyTimeDistributionData())

        let comfort_level_chart=this.$echarts.init(document.getElementById("comfortLevel"))
        comfort_level_chart.setOption(global_persona.getComfortLevelDistributionData())

        let weather_chart=this.$echarts.init(document.getElementById("weather"))
        weather_chart.setOption(global_persona.getWeatherDistributionData())
        
        let sport_type_chart=this.$echarts.init(document.getElementById("sportType"))
        sport_type_chart.setOption(global_persona.getSportTypeDistributionData())

        // let location_chart=this.$echarts.init(document.getElementById("location"))
        // location_chart.setOption(global_persona.getLocationDistributionData())
    }
  }
}
</script>


<style lang="scss" scoped>
    .chart-row{
        width: 100%;
        display: flex;
    }
    .check{
        margin: 0 0 2% 8% ;
    }
    #location img{
      width: 87%;
    }
</style>
